<template>
	<view class="withdraw-list-page">
		<view class="title">提现记录</view>
		<view v-if="loading" class="loading">加载中...</view>
		<view v-else>
			<view v-if="list.length === 0" class="empty">暂无提现记录</view>
			<view v-for="item in list" :key="item.id" class="withdraw-item">
				<view class="item-row">
					<text class="label">时间：</text>
					<text class="value">{{ item.createtime_txt }}</text>
				</view>
				<view class="item-row">
					<text class="label">订单号：</text>
					<text class="value">{{ item.order_no }}</text>
				</view>
				<view class="item-row">
					<text class="label">金额：</text>
					<text class="value money">¥{{ item.withdraw_price }}</text>
				</view>
				<view class="item-row">
					<text class="label">状态：</text>
					<text class="value status"
						:class="'status-' + item.withdraw_status">{{ statusTxt(item.withdraw_status) }}</text>
				</view>
				<view v-if="item.withdraw_status === 1" class="btn-row">
					<button class="action-btn" @click="handleCollect(item)" :disabled="item.loading">
						{{ item.loading ? '收款中...' : '确认收款' }}
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				loading: true,
			};
		},
		methods: {
			// 状态文字
			statusTxt(status) {
				switch (status) {
					case 0:
						return '审核中';
					case 1:
						return '审核通过,同意退款';
					case 2:
						return '审核失败';
					case 3:
						return '已确认收款';
					default:
						return '未知状态';
				}
			},
			// 加载提现列表
			getWithdrawList() {
				this.loading = true;
				this.$http({
					url: "addons/xilufitness/staff/getWithdrawList"
				}).then(res => {
					this.list = (res.data.list || []).map(item => ({
						...item,
						loading: false,
					}));
					this.loading = false;
				}).catch(() => {
					this.loading = false;
				});
			},
			// 收款操作
			handleCollect(item) {
				if (item.loading) return;
				this.$set(item, 'loading', true);
				uni.requestMerchantTransfer({
					mchId: '1720085329',
					package: item.cashramas,
					appId: 'wx1e302e8d4e70e5ac',
					success: (transferRes) => {
						console.log(transferRes);
						// 收款后，调用确认接口
						this.$http({
							url: "/addons/xilufitness/staff/edWithdraw",
							method: "POST",
							data: {
								id: item.id
							}
						}).then(() => {
							this.$set(item, 'withdraw_status', 3); // 已确认收款
							this.$set(item, 'loading', false);
							uni.showToast({
								title: "收款成功",
								icon: "success"
							});
						}).catch((res) => {
							this.$set(item, 'loading', false);
							uni.showToast({
								title: res.msg,
								icon: "none"
							});
						});
					},
					fail: (res) => {
						console.log(res);
						this.$set(item, 'loading', false);
						uni.showToast({
							title: "收款失败",
							icon: "none"
						});
					}
				});
			}
		},
		mounted() {
			this.getWithdrawList();
		}
	};
</script>

<style scoped>
	.withdraw-list-page {
		min-height: 100vh;
		background: #181a20;
		color: #fff;
		padding: 32rpx 20rpx 40rpx 20rpx;
	}

	.title {
		font-size: 40rpx;
		font-weight: 600;
		margin-bottom: 32rpx;
		color: #fff;
		letter-spacing: 4rpx;
	}

	.loading,
	.empty {
		text-align: center;
		color: #888;
		margin: 60rpx 0;
		font-size: 32rpx;
	}

	.withdraw-item {
		background: #23262f;
		border-radius: 20rpx;
		margin-bottom: 32rpx;
		padding: 24rpx 20rpx 18rpx 20rpx;
		box-shadow: 0 2rpx 16rpx 0 #2227;
	}

	.item-row {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.label {
		width: 120rpx;
		color: #aaa;
		font-size: 28rpx;
	}

	.value {
		font-size: 28rpx;
		color: #fff;
		word-break: break-all;
	}

	.money {
		color: #ffdf6b;
		font-weight: 600;
	}

	.status {
		font-weight: 600;
	}

	.status-0 {
		color: #ffb700;
	}

	.status-1 {
		color: #57e4ff;
	}

	.status-2 {
		color: #ff5151;
	}

	.status-3 {
		color: #4aff8a;
	}

	.btn-row {
		margin-top: 18rpx;
		text-align: right;
	}

	.action-btn {
		background: linear-gradient(90deg, #20e1ff, #41ffdb);
		color: #181a20;
		font-weight: bold;
		border: none;
		border-radius: 12rpx;
		padding: 12rpx 36rpx;
		font-size: 30rpx;
		cursor: pointer;
		transition: opacity 0.2s;
	}

	.action-btn:active {
		opacity: 0.7;
	}

	.action-btn[disabled] {
		background: #444;
		color: #ccc;
		cursor: not-allowed;
	}
</style>